import { Divider, Cascader } from "antd";
const options = [
    {
        value: "male",
        label: "男",
    },
    {
        value: "female",
        label: "女",
    },
];

const areas = [
    {
        value: "浙江",
        label: "浙江",
        children: [
            {
                value: "杭州",
                label: "杭州",
                children: [
                    {
                        value: "西湖",
                        label: "西湖",
                    },
                    {
                        value: "上城",
                        label: "上城",
                    },
                    {
                        value: "下城",
                        label: "下城",
                    },
                ],
            },
        ],
    },
    {
        value: "江苏",
        label: "江苏",
        children: [
            {
                value: "南京",
                label: "南京",
                children: [
                    {
                        value: "玄武区",
                        label: "玄武区",
                        disabled: true,
                    },
                    {
                        value: "金水区",
                        label: "金水区",
                    },
                ],
            },
        ],
    },
];
const View = () => {
    const onChange = (value) => {
        console.log(value);
    };
    return (
        <>
            <Divider>
                <h3>级联选择</h3>
            </Divider>
            <Cascader
                onChange={onChange}
                options={options}
                placeholder='请选择性别'
            />
            <Cascader
                onChange={onChange}
                options={areas}
                expandTrigger='hover'
                placeholder='请选择地区'
            />
            <Divider>
                <h3>级联选择多选</h3>
            </Divider>
            <Cascader
                onChange={onChange}
                options={areas}
                expandTrigger='hover'
                multiple
                placeholder='请选择地区'
            />
        </>
    );
};

export default View;
